<template>
	<view class="graybg">
		<view class="pads">
			<view class="box">
				<view v-for="b in billsList" :key="b.id">
					<view class="billItem">
						<!-- parentType -->
						<view>
							<label class="blueTag"> 酒店订单</label>
							订单编号：
							{{ b.id }}
						</view>
						<view class="name">
							{{b.name}}
						</view>
						<view>
							{{b.addName}}
						</view>
						<view>
							{{b.rzInfo}}
						</view>
						<view>
							{{b.roomType}}
						</view>
						<view>
							{{b.bedInfo}}
						</view>
						<!-- 0  未支付  1  支付成功   2  已取消  3  已退订 -->
						<view class="status">
							<text class="gary" v-if="b.status == '0'&&b.surplus!='0,0'&&b.surplus!='0'"
								style="margin-right: 48rpx;"> 待支付
							</text>
							<text class="warning" v-if="b.status == '0'&&(b.surplus=='0,0'||b.surplus=='0')">已取消</text>
							<text class="success" v-if="b.status == '1'">支付成功</text>
							<text class="warning" v-if="b.status == '2'">已取消</text>
							<text class="danger" v-if="b.status == '3'||b.status == '4'">已退订</text>
						</view>
						<view class="time" v-if="b.status == '0'&&(b.surplus!='0,0'||b.surplus!='0')">
							（<uni-countdown style="display: inline-block;" :font-size="12" color="#999" splitorColor="#999"
								@timeup="timeup" :show-day="false" :show-hour="false" :start="true"
								:minute="Number(b.surplus.split(',')[0])"
								:second="Number(b.surplus.split(',')[1])"></uni-countdown>)
						</view>

						<view class="billFoot">
							<view class="price">
								<text> 共计 ¥{{b.total}}</text>


								<view style="display: flex;">
									<button class="billbtn" @click.stop="showDetail(b)">详情</button>
									<button class="billbtn sxbtn" v-if="b.status == '0'&&(b.surplus!='0,0'||b.surplus!='0')"
										@click="goPay(b)">
										支付</button>
								</view>
							</view>
						</view>

					</view>
					<view class="billItem" hidden>
						<!-- parentType -->
						<view>
							<label class="purpleTag"> 餐饮订单</label>
							订单编号：
							{{ b.id }}
						</view>
						<view class="name">
							{{b.name}}
						</view>
		
						<view v-for="n in 3">
							午餐 <text>2 份</text>
						</view>
						<view style="height: 40rpx;"></view>
						<!-- 0  未支付  1  支付成功   2  已取消  3  已退订 -->
						<view class="status">
							<text class="gary" v-if="b.status == '0'&&b.surplus!='0,0'&&b.surplus!='0'"
								style="margin-right: 48rpx;"> 待支付
							</text>
							<text class="warning" v-if="b.status == '0'&&(b.surplus=='0,0'||b.surplus=='0')">已取消</text>
							<text class="success" v-if="b.status == '1'">支付成功</text>
							<text class="warning" v-if="b.status == '2'">已取消</text>
							<text class="danger" v-if="b.status == '3'||b.status == '4'">已退订</text>
						</view>
						<view class="time" v-if="b.status == '0'&&(b.surplus!='0,0'||b.surplus!='0')">
							（<uni-countdown style="display: inline-block;" :font-size="12" color="#999" splitorColor="#999"
								@timeup="timeup" :show-day="false" :show-hour="false" :start="true"
								:minute="Number(b.surplus.split(',')[0])"
								:second="Number(b.surplus.split(',')[1])"></uni-countdown>)
						</view>

						<view class="billFoot">
							<view class="price">
								<text> 共计 ¥{{b.total}}</text>


								<view style="display: flex;">
									<button class="billbtn" @click.stop="showDetail(b)">详情</button>
									<button class="billbtn sxbtn" v-if="b.status == '0'&&(b.surplus!='0,0'||b.surplus!='0')"
										@click="goPay(b)">
										支付</button>
								</view>
							</view>
						</view>

					</view>
					<view class="billItem" hidden>
						<!-- parentType -->
						<view>
							<label class="orangeTag">接送订单</label>
							订单编号：
							{{ b.id }}
						</view>
						<view class="name">
							{{b.name}}
						</view>
		
						<view>
							xx 火车站- xx 酒店
						</view>
						<view>
							大巴车：1 辆
						</view>
						<view>
							时间： 2023.05.02 12:00
						</view>
						<!-- 0  未支付  1  支付成功   2  已取消  3  已退订 -->
						<view class="status">
							<text class="gary" v-if="b.status == '0'&&b.surplus!='0,0'&&b.surplus!='0'"
								style="margin-right: 48rpx;"> 待支付
							</text>
							<text class="warning" v-if="b.status == '0'&&(b.surplus=='0,0'||b.surplus=='0')">已取消</text>
							<text class="success" v-if="b.status == '1'">支付成功</text>
							<text class="warning" v-if="b.status == '2'">已取消</text>
							<text class="danger" v-if="b.status == '3'||b.status == '4'">已退订</text>
						</view>
						<view class="time" v-if="b.status == '0'&&(b.surplus!='0,0'||b.surplus!='0')">
							（<uni-countdown style="display: inline-block;" :font-size="12" color="#999" splitorColor="#999"
								@timeup="timeup" :show-day="false" :show-hour="false" :start="true"
								:minute="Number(b.surplus.split(',')[0])"
								:second="Number(b.surplus.split(',')[1])"></uni-countdown>)
						</view>

						<view class="billFoot">
							<view class="price">
								<text> 共计 ¥{{b.total}}</text>


								<view style="display: flex;">
									<button class="billbtn" @click.stop="showDetail(b)">详情</button>
									<button class="billbtn sxbtn" v-if="b.status == '0'&&(b.surplus!='0,0'||b.surplus!='0')"
										@click="goPay(b)">
										支付</button>
								</view>
							</view>
						</view>

					</view>
				</view>
				
				
				<view class="nodata" v-if="billsList.length==0">
					<image mode="aspectFit" src="@/static/nodata.png"></image>
					<text> 还没有订单</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	import * as hotel from '@/common/hotel.js';
	import _ from 'lodash';
	const app = getApp();
	const billsList = ref([]);
	const alertDialog = ref(null);
	const countdown = ref({
		start: true,
		minute: 0,
		second: 0
	})
	const currUser = uni.getStorageSync('currUser');
	onShow(() => {
		billsList.value = []
		getBills()
	});

	function timeup() {
		getBills()
	}

	function getBills() {
		const venueId = app.globalData.venue.id
		hotel.getbilllist(currUser.userId,venueId).then(res => {
			billsList.value = res.rows;
		});
	}

	function showDetail(b) {
		const detail = encodeURIComponent(JSON.stringify(b))
		let path = `/pages_hotel/hotel/billDetail?orderId=${b.id}&detail=${detail}`;
		uni.navigateTo({
			url: path
		});
	}

	function pay() {
		alertDialog.value.open();
	}

	function dialogConfirm() {
		// 微信支付
	}

	function dialogClose() {
		alertDialog.value.close();
	}

	function goPay(r) {
		hotel.getbilldetailbyId(r.id).then(res => {
			let path = `/pages_hotel/hotel/pay?money=${r.total}&orderId=${r.id}&surplus=${res.data.surplus}`;
			uni.redirectTo({
				url: path
			});
		})
	}
</script>

<style lang="scss" scoped>
	.mtb20 {
		margin: 20rpx 0;
	}

	.pads {
		padding: 0 25rpx 70rpx;
	}

	.billItem {
		position: relative;
		width: auto;
		padding-bottom: 1px;

		.uni-input {
			padding: 15rpx 0;
			color: #000;
		}

		.billFoot {
			margin-bottom: 20rpx;
		}
	}

	.rrcard .box {
		padding: 0 0 1px;
		margin: 20rpx 0 0;
	}

	.graybg {
		background: #f7f8fa;
		height: 100vh;
		width: 100vw;
		overflow: auto;
	}

	.whitebg {
		background: #fff;
		margin-top: 15rpx;
		border-radius: 20rpx;
		margin-bottom: 180rpx;
	}

	.name {
		font-size: 34rpx;
		color: #000;
	}

	.padh20 {
		padding: 0 25rpx;
	}

	.billFoot {
		.price {
			width: 100%;
			justify-content: space-between;
		}

		.billbtn {
			color: #1EC886;
			border: 1px solid #1EC886;
			border-radius: 0;
			background-color: transparent;

			&::after {
				border: none;
			}
		}

		.sxbtn {
			margin: 0 0 0 10rpx;
			background: #1EC886;
			color: #fff;
		}
	}

	.billFoot .tip {
		font-size: 24rpx;
		font-size: 24rpx;
		color: #999;
		font-weight: 500;
		margin: 0 20rpx;
	}

	.billItem>view {
		margin-bottom: 10rpx;
	}

	.billFoot text {
		white-space: nowrap;
	}

	.billFoot text.danger {
		color: #da2a2a;
	}

	.blueTag {
		color: #fff;
		background-color: #1EC886;
		padding: 10rpx 10rpx;
	}

	.purpleTag {
		color: #fff;
		background-color: #717bef;
		padding: 10rpx 10rpx;
	}

	.orangeTag {
		color: #fff;
		background-color: #ff8124;
		padding: 10rpx 10rpx;
	}

	.status {
		position: absolute;
		right: 20rpx;
		bottom: 120rpx;
		white-space: nowrap;

		.warning {
			color: #ff8124;
		}

		.danger {
			color: #da2a2a;
		}

		.gary {
			color: #666;
		}

		.success {
			color: #1EC886;
		}
	}

	.time {
		right: -30rpx;
		bottom: 120rpx;
		position: absolute;
		font-size: 12px;
	}
</style>